<template>
  <el-card shadow="hover">
    <el-descriptions
      class="margin-top"
      title="客满小记"
      :column="3"
      :size="size"
      border
    >
      <template #extra>
        <el-button
          v-if="limit"
          type="success"
          size="small"
          @click="handleEdit(2, 0)"
        >
          新增客满小记
        </el-button>
        <el-button type="primary" size="small" @click="handleMore(2, 0)">
          查看更多
        </el-button>
      </template>
    </el-descriptions>
    <el-table
      v-loading="listLoading"
      :data="CustomerSatisfactionRecordList.List"
      @selection-change="setSelectRows"
    >
      <el-table-column
        align="center"
        label="小记ID"
        prop="TrackID"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="小记时间"
        prop="TrackTime"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="服务人"
        prop="StaffName"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="客满小记"
        prop="TrackMemo"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="联系方式"
        prop="TrackTypeName"
        show-overflow-tooltip
      />

      <el-table-column
        align="center"
        label="下次服务时间"
        prop="NextTrackTime"
        show-overflow-tooltip
      />
      <!-- <el-table-column align="center" label="操作">
              <template #default="{ row }">
                <el-button size="small" @click="handleEdit(2, row)">
                  查看/修改小记
                </el-button>
              </template>
            </el-table-column> -->
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.pageNo"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="CustomerSatisfactionRecordList.Total"
      :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </el-card>
  <vacancy-edit ref="vacancyRef" @fetch-data="fetchData" />
</template>

<script>
  import VacancyEdit from '@/views/business/components/VacancyEdit'
  export default defineComponent({
    name: 'SatisfactionRecord',
    components: {
      VacancyEdit,
    },
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const state = reactive({
        limit: false,
        vacancyRef: null,
        CustomerSatisfactionRecordList: [],
        selectRows: '',
        formRef: null,
        listLoading: true,
        form: {
          roles: [],
        },
        rules: {
          title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
        },
        title: '',
        dialogFormVisible: false,
        queryForm: {
          pageNo: 1,
          pageSize: 5,
        },
      })

      const showList = (OrderInfo, CustomerSatisfactionRecordList, limit) => {
        state.limit = limit
        state.OrderInfo = OrderInfo
        state.CustomerSatisfactionRecordList = CustomerSatisfactionRecordList
        state.listLoading = false
        console.log(OrderInfo, 'OrderInfoOrderInfo')
        console.log(CustomerSatisfactionRecordList, 'OrderInfoOrderInfo')
        console.log('state.limit', state.limit)
      }
      const handleEdit = (n, row) => {
        // 客满小记
        if (n === 2 && row === 0) {
          row = {
            OrderID: state.OrderInfo.OrderID,
            TrackClass: 3,
            TrackID: 0,
          }
        }
        // 客满小记
        if (n == 2) state.vacancyRef.showEdit(row)
      }
      const fetchData = () => {
        emit('fetch-data')
      }
      const setSelectRows = (val) => {
        state.selectRows = val
      }

      return {
        ...toRefs(state),
        showList,
        fetchData,
        handleEdit,
        setSelectRows,
        close,
      }
    },
  })
</script>
